<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :inline="true" size="small" :model="listQuery.params" class="filter-form">
      <el-form-item label="姓名">
        <el-input v-model="listQuery.params.realName" placeholder="请输入姓名"/>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="listQuery.params.phone" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="listQuery.params.idCard" placeholder="请输入身份证号"/>
      </el-form-item>
      <el-form-item label="单位名称">
        <el-input v-model="listQuery.params.companyName" placeholder="请输入单位名称"/>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="listQuery.params.isApply" placeholder="全部" clearable @change="fetchApplyList">
          <el-option label="未通过" value="0"/>
          <el-option label="通过" value="1"/>
          <el-option label="驳回" value="2"/>
          <el-option label="待审核" value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchApplyList">查询</el-button>
        <el-button type="primary" @click="openUpdateApplyDialog">批量审核</el-button>

      </el-form-item>
    </el-form>

    <!-- 表格列表 -->
    <el-table :data="tableData" v-loading="loading" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column
      type="selection"
      >
    </el-table-column>
      <el-table-column prop="isApply" label="状态" width="100">
        <template v-slot="scope">
          <el-tag v-if="scope.row.isApply == '0'" type="warning">不通过</el-tag>
          <el-tag v-else-if="scope.row.isApply == '1'" type="success">通过</el-tag>
          <el-tag v-else-if="scope.row.isApply == '2'" type="danger">驳回</el-tag>
          <el-tag v-else-if="scope.row.isApply == '3'" type="info">待审核</el-tag>
          <el-tag v-else type="info">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template v-slot="scope">
          <el-button size="mini" type="primary" @click="openDialog(scope.row)">审核</el-button>

        </template>
      </el-table-column>
      <el-table-column prop="realName" label="姓名" width="100"/>
      <el-table-column prop="phone" label="手机号" width="140"/>
      <el-table-column label="个人照片" width="120">
        <template v-slot="scope">
          <el-image :src="scope.row.photoUrl" style="width: 60px; height: 60px;" fit="cover"/>
        </template>
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号" width="180"/>
      <el-table-column prop="companyName" label="单位名称" width="180"/>
      <el-table-column prop="entryTime" label="进厂时间" width="160"/>
      <el-table-column prop="leaveTime" label="离厂时间" width="160"/>

      <el-table-column prop="createTime" label="申请时间" width="160"/>
      <el-table-column prop="jobType" label="工种/岗位" width="120"/>
      <el-table-column prop="workArea" label="作业区域" width="120"/>
      <!--            <el-table-column prop="licenses.name" label="证书名称" width="120" />-->
      <!--            <el-table-column prop="licenses.type" label="证书类型" width="120" />-->
      <!--            <el-table-column prop="licenses.project" label="准操项目" width="120" />-->
      <!--            <el-table-column prop="licenses.number" label="证书号" width="120" />-->
      <!--            <el-table-column prop="licenses.issueDate" label="发证日期" width="120" />-->
      <!--            <el-table-column prop="licenses.expireDate" label="到期日期" width="120" />-->
      <el-table-column label="照片" width="100">
        <template v-slot="scope">
          <el-image :src="scope.row.photoUrl" style="width: 60px;"/>
        </template>
      </el-table-column>
      <el-table-column label="健康证明" width="100">
        <template v-slot="scope">
          <el-image :src="scope.row.healthProofUrl" style="width: 60px;"/>
        </template>
      </el-table-column>
      <el-table-column label="无犯罪记录" width="100">
        <template v-slot="scope">
          <el-image :src="scope.row.noCriminalProofUrl" style="width: 60px;"/>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <div style="text-align: right; margin-top: 10px;">
      <el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="listQuery.current"
                     :page-size="listQuery.size" @current-change="handleCurrentChange"/>
    </div>

    <!-- 审核弹窗 -->
    <el-dialog title="审核申请" :visible.sync="dialogVisible" width="500px">
      <el-form :model="editForm" label-width="100px" disabled>
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="editForm.realName" placeholder="请输入姓名" />
        </el-form-item>

        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone" placeholder="请输入手机号"/>
        </el-form-item>

        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="editForm.idCard" placeholder="请输入身份证号"/>
        </el-form-item>

        <el-form-item label="单位名称" prop="companyName">
          <el-input v-model="editForm.companyName"/>
        </el-form-item>

        <el-form-item label="工种/岗位" prop="jobType">
          <el-input v-model="editForm.jobType"/>
        </el-form-item>

        <el-form-item label="作业区域" prop="deptId">
          <depart-tree-select v-model="editForm.deptId" :options="treeData" :props="defaultProps"/>
        </el-form-item>

        <el-form-item label="进厂时间" prop="entryTime">
          <el-date-picker v-model="editForm.entryTime" type="datetime" style="width: 100%"/>
        </el-form-item>

        <el-form-item label="离厂时间" prop="leaveTime">
          <el-date-picker v-model="editForm.leaveTime" type="datetime" style="width: 100%"/>
        </el-form-item>

        <el-form-item label="照片">
          <file-upload v-model="editForm.photoUrl"/>
        </el-form-item>

        <el-form-item label="健康证明">
          <file-upload v-model="editForm.healthProofUrl"/>
        </el-form-item>

        <el-form-item label="无犯罪记录">
          <file-upload v-model="editForm.noCriminalProofUrl"/>
        </el-form-item>

        <el-form-item label="添加证书">
          <el-table :data="editForm.licenses" border stripe style="width: 100%">
            <el-table-column prop="name" label="证书名称" label-class-name="required-column">
              <template v-slot="scope">
                <el-input v-model="scope.row.name" placeholder="请输入证书名称"/>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="证书类型" label-class-name="required-column">
              <template v-slot="scope">
                <el-select v-model="scope.row.type" placeholder="请选择证书类型">
                  <el-option v-for="info in licensesInfo.type" :key="info" :label="info" :value="info"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="project" label="准操项目" label-class-name="required-column">
              <template v-slot="scope">
                <el-select v-model="scope.row.project" placeholder="请选择准操项目">
                  <el-option v-for="info in licensesInfo.project" :key="info" :label="info" :value="info"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="证书号">
              <template v-slot="scope">
                <el-input v-model="scope.row.number" placeholder="请输入证书号"/>
              </template>
            </el-table-column>
            <el-table-column prop="issueDate" label="发证日期">
              <template v-slot="scope">
                <el-date-picker v-model="scope.row.issueDate" type="date" style="width: 100%"/>
              </template>
            </el-table-column>
            <el-table-column prop="expireDate" label="到期日期">
              <template v-slot="scope">
                <el-date-picker v-model="scope.row.expireDate" type="date" style="width: 100%"/>
              </template>
            </el-table-column>
            <el-table-column prop="imgUrl" label="证书照片" label-class-name="required-column">
              <template v-slot="scope">
                <file-upload v-model="scope.row.imgUrl"/>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="状态" :disabled="false">
          <el-form>
            <el-radio-group v-model="editForm.isApply">
            <el-radio :label="'0'">不通过</el-radio>
            <el-radio :label="'1'">通过</el-radio>
            <el-radio :label="'2'">驳回</el-radio>

          </el-radio-group>
          </el-form>

        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </div>
    </el-dialog>

      <el-dialog
        title="批量操作"
        :visible.sync="updateApplyStatusDialogVisible"
        width="30%">
        <div style="margin-bottom: 10px">
          为 {{ multipleSelection.length }} 条记录批量更新审核状态：
        </div>
        <el-radio-group v-model="updateApplyStatusOption">
            <el-radio :label="'0'">不通过</el-radio>
            <el-radio :label="'1'">通过</el-radio>
            <el-radio :label="'2'">驳回</el-radio>
          </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateApplyStatusDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleUpdateApplyStatus">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {applyExamList, updateApply, updateApplyStatus} from '@/api/paper/exam'
import DepartTreeSelect from "@/components/DepartTreeSelect/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import {fetchTree} from "@/api/sys/depart/depart";
import {licensesInfo} from "@/utils";

export default {
  name: 'AuditExam',
  components: {FileUpload, DepartTreeSelect},
  data() {
    return {
      licensesInfo: licensesInfo,
      listQuery: {
        current: 1,
        size: 10,
        params: {
          realName: '',
          phone: '',
          idCard: '',
          companyName: '',
          isApply: '3'
        }
      },
      tableData: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      editForm: {},
      defaultProps: {
        value: 'id',
        label: 'deptName',
        children: 'children'
      },
      treeData: [],
      multipleSelection: [],
      updateApplyStatusOption: '1',
      updateApplyStatusDialogVisible: false
    }
  },
  mounted() {
    this.fetchApplyList()
    fetchTree({}).then(response => {
      this.treeData = response.data
    })
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    fetchApplyList() {
      this.loading = true
      applyExamList(this.listQuery).then(res => {
        const {records, total} = res.data
        this.tableData = records
        this.total = parseInt(total)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.fetchApplyList()
    },
    resetFilter() {
      this.listQuery.params = {
        realName: '',
        phone: '',
        idCard: ''
      }
      this.fetchApplyList()
    },
    openDialog(row) {
      this.editForm = {...row}
      this.dialogVisible = true
    },
    submitEdit() {
      updateApply(this.editForm).then(() => {
        this.$message.success('审核信息已保存')
        this.dialogVisible = false
        this.fetchApplyList()
      }).catch(() => {
        this.$message.error('保存失败')
      })
    },
    openUpdateApplyDialog() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请至少选择一条记录')
        return
      }
      this.updateApplyStatusDialogVisible = true
    },
    handleUpdateApplyStatus() {
      const ids = this.multipleSelection.map(item => item.id)
      updateApplyStatus({ids, isApply: this.updateApplyStatusOption}).then(() => {
        this.$message.success('批量审核状态已更新')
        this.fetchApplyList()
      }).catch(() => {
        this.$message.error('批量审核状态更新失败')
      }).finally(() => {
        this.updateApplyStatusOption = '1'
        this.updateApplyStatusDialogVisible = false
      })
    }
  }
}
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}
</style>
